<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>商品详情页面</title>
    <link rel="stylesheet" href="../extra.css">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../plugins/font-awesome/css/font-awesome.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to to the body tag
to get the desired effect
|---------------------------------------------------------|
|LAYOUT OPTIONS | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="index.html" class="nav-link">主页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">联系</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <button style="font-weight: bold" type="button" class="button-pill button btn-danger"
                        onclick="logout()">
                    退出
                </button>
            </li>
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i
                        class="fa fa-th-large"></i></a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <!--<a href="index3.html" class="brand-link">-->
        <!--<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"-->
        <!--style="opacity: .8">-->
        <!--<span class="brand-text font-weight-light">AdminLTE 3</span>-->
        <!--</a>-->

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="../../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">用户</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item ">
                        <a href="index.html" class="nav-link">
                            <i class="nav-icon fa fa-dashboard"></i>
                            <p>
                                概况
                                <!--<i class="right fa fa-angle-left"></i>-->
                            </p>
                        </a>
                    </li>
                    <li class="nav-item ">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fa fa-dashboard"></i>
                            <p>
                                用户信息
                                <i class="right fa fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="usernametable.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>个人信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="orderinfo.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>订单详情</p>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="nav-item has-treeview">
                        <a href="goodsservice.html" class="nav-link">
                            <i class="nav-icon fa fa-table"></i>
                            <p>
                                商品服务
                            </p>
                        </a>
                    </li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <!--<h1 class="m-0 text-dark">商品详情</h1>-->
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">主页</a></li>
                            <li class="breadcrumb-item">商品服务</a></li>
                            <li class="breadcrumb-item active">商品详情</li>

                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <section class="content">

            <div class="row">
                <div class="col-1"></div>
                <div class="col-10">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title text-bold text-lg" id="gName">Carousel (<span
                                    class="btn btn-warning btn-flat btn-sm" id="gLabel">好吃、好吃</span>)</span>
                            </h3>
                        </div>
                        <div class="card-body">
                            <div id="g_img" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#g_img" data-slide-to="0" class="active"></li>
                                    <li data-target="#g_img" data-slide-to="1"></li>
                                    <li data-target="#g_img" data-slide-to="2"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100"
                                             id="gImg1"
                                             onerror="this.src='a.png'"
                                             src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap"
                                             alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100"
                                             id="gImg2"
                                             onerror="this.src='a.png'"
                                             src="http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap"
                                             alt="Second slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100"
                                             id="gImg3"
                                             src="http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap"
                                             onerror="this.src='a.png'"
                                             alt="Third slide">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#g_img" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#g_img" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            <div style="margin-top: 10px">
                                <span class="text-bold text-danger text-lg" id="gPrice">¥ 80.3</span>
                                <span class="float-right text-bold text-info">库存：<span id="gQuantity"
                                                                                       class="text-success">4</span></span>
                            </div>
                            <div class="row" style="margin-top: 5px">
                                <div class="col-4">
                                    <span class="text-bold text-dark text-lg" id="gName1">焦糖瓜子fsfdsfdsf</span>

                                </div>
                                <div class="col-8">
                                    <span class="text-primary text-md-right" style="float: right;" id="gLy">广东广州</span>
                                </div>
                            </div>

                            <!--<div style="margin: 5px">-->
                            <!--</div>-->
                            <div>
                                <p class="gDetail">Lorem ipsum represents a long-held tradition for designers,
                                    typographers and the like. Some people hate it and argue for
                                    its demise, but others ignore the hate as they create awesome
                                    tools to help create filler text for everyone from bacon lovers
                                    to Charlie Sheen fans.</p>
                            </div>

                            <!--<span class="text-success">状态: <button type="button"-->
                            <!--class="btn btn-block btn-secondary btn-flat"-->
                            <!--id="gState">2</button></span>-->
                        </div>
                    </div>


                </div>
                <div class="col-1"></div>

            </div>
        </section>

    </div>
    <!-- /.content -->
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="float-right d-none d-sm-block-down">
            Anything you want
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2018 Solitary.</strong> All rights reserved.
    </footer>
</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../../../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../../../plugins/chart.js/Chart.min.js"></script>
<script src="../../../dist/js/demo.js"></script>
<script src="../../../dist/js/pages/dashboard3.js"></script>
</body>

<script>
  let good_id = sessionStorage.getItem('good_id')
  let user_token = sessionStorage.getItem('user_token')

  $(function () {
    renderGoodInfo()
    let val = parseInt($('#gQuantity')
      .text())
    console.log('======val' + val)
    if (val <= 5) {
      $('#gQuantity')
        .attr('class', 'text-danger')
      $('#gQuantity')
        .text('只剩' + val + '件了')
    }
  })

  function renderGoodInfo() {
    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:8080/api/goods/' + good_id,
      'method': 'GET',
      'headers': {
        'Authorization': user_token
      }
    }


    $.ajax(settings)
      .done(function (response) {
          if (response.code == 0) {
            console.log(response.message)
            let data = response.data
            $('#gName')
              .text(data.gName)
            $('#gName1')
              .text(data.gName)
            $('#gPrice')
              .text('¥ ' + data.gPrice)
            $('#gLy')
              .text(data.gLy)
            $('#gImg1')
              .attr('src', data.gImg)
            $('#gImg2')
              .attr('src', data.gImg)
            $('#gImg3')
              .attr('src', data.gImg)
            $('#gLabel')
              .text(data.gLabel)
            $('#gDetails')
              .text(data.gDetails)
            $('#gQuantity')
              .text(data.gQuantity)
            let val = parseInt($('#gQuantity')
              .text())
            if (val > 0 && val <= 5) {
              $('#gQuantity')
                .attr('class', 'text-danger')
              $('#gQuantity')
                .text('只剩' + val + '件了')
            } else if (val == 0) {
              $('#gQuantity')
                .attr('class', 'text-danger')
              $('#gQuantity')
                .text('已经卖光了')
            } else {
              $('#gQuantity')
                .attr('class', 'text-success')
            }
            let state = parseInt(data.gState)
            console.log(state)
            if (state == 1) {
              $('#gState')
                .text('上架中')
            } else if (state == 0) {
              $('#gState')
                .text('已下架')
            } else if (state == -1) {
              $('#gState')
                .text('已缺货')
            }
            // $('#gState')
            //   .text(data.gState)

          }
          else {
            console.log(response.message)
          }
        }
      )
  }


  function logout() {
    sessionStorage.removeItem('user_token')
    window.location.href = '../common/login.html'

  }

</script>

</html>
